<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>尺码</title>
    <link rel="stylesheet" href="../css/size.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/swiper.min.js"></script>
</head>

<body>
    <header>
        <div class="swiper-container swiper-container-initialized swiper-container-horizontal">
            <div class='swiper-wrapper'>
                <div class="swiper-slide">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
                <div class="swiper-slide">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
                <div class="swiper-slide">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
                <div class="swiper-slide">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
                <div class="swiper-slide">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-bullets">
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
            </div>
        </div>
    </header>
    <section>
        <div class="detail">
            <div class="d-top">
                <div class="goods-img">
                    <img src="" alt="" style="height: 100%;width:100%">
                </div>
                <div class="goods-main">
                    <h3 class="g-logo"></h3>
                    <h3 class="g-name"></h3>
                    <h4 class="g-price"></h4>
                    <h4 class="g-amount"></h4>
                </div>
                <div class="cancel">X</div>
            </div>
            <div class="d-mid">
                <div class="i-color">
                    <!-- <span class="color-s">蓝色</span><img src="../img/xuan.jpg" class="color-o" /> -->
                    <select name="" id="" class="color-s" style="height: 100%;width:100%">
                        <option value=""></option>
                        <option value=""></option>
                    </select>
                </div>
                <span class="fenge">|</span>
                <div class="i-size">
                    <select name="" id="" class="size-s" style="height: 100%;width:100%">
                        <option value=""></option>
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="d-bot">
                <button class="subBtn">-</button>
                <input type="text" class="numIpt" value="1" />
                <button class="addBtn">+</button>
            </div>
            <div class="d-foo">
                <div class="cart">加入购物车</div>
                <div class="buy">立即购买</div>
            </div>
        </div>
    </section>
    <script src="../js/cookie.min.js"></script>
    <script>
        // // 全局ajax设置
        // // 为所有的ajax请求都会加上这个请求头
        // $(document).ajaxSend(function (event, xhr) {
        // // token放到请求头中
        // //xhr.setRequestHeader("token", window.localStorage.getItem("token"));
        // xhr.setRequestHeader("token",'757e454832c69276307417876d052daa');    
        // // 是否ajax请求
        // xhr.setRequestHeader("x-requested-with", "XMLHttpRequest");
        // });
        
         $(document).ajaxSend(function (event, xhr) {
            xhr.setRequestHeader('token',getCookie('couponsId'));
            xhr.setRequestHeader('x-requested-with', 'XHRHttpRequest');
        })

        let goodsTypeId = ''

        $.get('http://106.13.115.175:8080/elleshop/goods/findGoodsById.do',{
            goodsId:1
         },function(res){
            console.log(res.info)
            $('.g-logo').html(res.info.goodsMsg)
            $('.g-name').html(res.info.goodsName)
            $('.goods-img img').prop('src',res.info.goodsImgUrl)
            $('.swiper-slide img').prop('src',res.info.goodsImgUrl)

            let str = res.info.colorList.map(v=>
                `
                    <option value="" data-color="${v.colorId}">${v.colorName}</option> 
                `
            ).join('')
            $('.color-s').html( str )

            let str11 = res.info.sizeList.map(v=>
                `
                    <option value="" data-size="${v.sizeId}">${v.sizeName}</option> 
                `
            ).join('')
            $('.size-s').html( str11 )
           
          let colorId = $("select option:selected").eq(0).attr('data-color')  
          let sizeId = $("select option:selected").eq(1).attr('data-size')
          console.log( colorId , sizeId   )
          $.get('http://106.13.115.175:8080/elleshop/goodsType/findGoodsTypeByCZ.do',{
                colorId,sizeId
            },function(res){
                console.log(res.info)
                $('.g-price').html('￥'+res.info.price)
                $('.g-amount').html('库存：'+res.info.inventoryNum)
                goodsTypeId =  res.info.goodsTypeId 
            })
         })
         
         $('select').click(function(){
            colorId = $("select option:selected").eq(0).attr('data-color')
            sizeId = $("select option:selected").eq(1).attr('data-size')
            // console.log( $("select option:selected").eq(0).attr('data-color') )
            // console.log( $("select option:selected").eq(1).attr('data-size') )
            // console.log( colorId , sizeId   )
            $.get('http://106.13.115.175:8080/elleshop/goodsType/findGoodsTypeByCZ.do',{
                colorId,sizeId
            },function(res){
                console.log(res.info)
                $('.g-price').html('￥'+res.info.price)
                $('.g-amount').html('库存：'+res.info.inventoryNum)
                goodsTypeId =  res.info.goodsTypeId 
            })            

         })

        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            autoplay: true,
        });
        var jia = document.querySelector('.addBtn')
        var jian = document.querySelector('.subBtn')
        var pnumipt = document.querySelector('.numIpt')
        // 加减输入框
        let pnum = pnumipt.value
        jia.onclick = function () {
            pnum++
            pnumipt.value = pnum
        }
        jian.onclick = function () {
            if (pnum == 1) {
                return
            } else {
                pnum--
                pnumipt.value = pnum
            }
        }    
        pnumipt.onchange = function () {
            if (pnumipt.value < 1) {
                pnum = 1
                return
            }
            pnum = pnumipt.value
        }
        
        $('.cart').click(function () {
            console.log(goodsTypeId)
            console.log($('.numIpt').val())
            $.ajax({
                async:true,
                url: 'http://106.13.115.175:8080/elleshop/addGoodsToCart',
                type: 'POST',
                data: {
                    goodsNum: $('.numIpt').val(),
                    goodsTypeId
                },
                success: function (res) {
                    console.log(res)
                    location.href = 'shopcar.html'
                }
            })
        })

 
    </script>
</body>

</html>